import React from 'react'
import './GrayBorderRoundAvatar.css'
import defaultAvatarUrl from '../../res/images/web/shared/touxiang@2x.png'

const GrayBorderRoundAvatar = props => {
    const {
        avatarUrl,
        size,
    } = props

    const avatarStyle = {
        background: `url(${avatarUrl ? avatarUrl : defaultAvatarUrl})`,
        backgroundSize: 'cover',
    }

    const sizeClsMapper = {
        'lg': 'gray-border-round-avatar-lg',
        'mid': 'gray-border-round-avatar-mid',
        's': 'gray-border-round-avatar-s',
        'xs': 'gray-border-round-avatar-xs',
    }

    return (
        <div
            style={avatarStyle}
            className={sizeClsMapper[size]}
        />
    )
}

export default GrayBorderRoundAvatar
